<template>
	<view>
		
		<fui-nav-bar isOccupy isFixed background="#0052D9" title="备件领用详情" color="#fff" @leftClick="leftClick">
		  <fui-icon color="#fff" name="arrowleft"></fui-icon>
			<template v-if="status==5" v-slot:right>
				<u-icon name="trash-fill" color="#fff" size="45rpx"></u-icon>
			</template>
		</fui-nav-bar>
		
		<scroll-view scroll-y="true" style="height: 100vh;">
			<view class="statusType"
			:style="{ border: `1rpx solid ${statusColors[status] || statusColors.default}`,color: `${statusColors[status] || statusColors.default}` }"
			>
				{{status==1?'待审核':(status==2?'通过':(status==3?'审核中':(status==4?'驳回':'已撤回')))}}
			</view>
			<view class="warp">
			  <view class="nav">
			    <view class="port">
			      <view class="title">
			        <fui-section :padding="['0', '20rpx']" title="领用信息" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
			      </view>
			      <view class="li">
			        <view class="left">领用单号</view>
			        <view class="right">BX-20224648</view>
			      </view>
			      <view class="li">
			        <view class="left">领用主题</view>
			        <view class="right">插头领用申请20220523</view>
			      </view>
			      <view class="li">
			        <view class="left">领用时间</view>
			        <view class="right">2022-02-17</view>
			      </view>
			      <view class="li">
			        <view class="left">仓库名称</view>
			        <view class="right">总仓库</view>
			      </view>
			      <view class="li">
			        <view class="left">领用申请人</view>
			        <view class="right">admin</view>
			      </view>
						<view class="li">
						  <view class="left">所在部门</view>
						  <view class="right">生产部门</view>
						</view>
						<view class="li">
						  <view class="left">领用类型</view>
						  <view class="right">维修</view>
						</view>
						<view class="li">
						  <view class="left">关联工单</view>
						  <view class="right">WX-2022345</view>
						</view>
						<view class="li">
						  <view class="left">领用原因</view>
						  <view class="right">失灵</view>
						</view>
						<view class="li">
						  <view class="left">备注</view>
						  <view class="right"></view>
						</view>
			    </view>
			  </view>
			
			  <view class="">
			    <fui-tabs @change="change" :tabs="tabs" isDot scroll alignLeft :short="false"></fui-tabs>
			  </view>
			  <view class="scroll-view">
			    <faultMessage v-if="checkIndex === 0"></faultMessage>
			    <auditCheck v-else-if="checkIndex === 2"></auditCheck>
			    <service v-else></service>
			  </view>
			</view>
		</scroll-view>
		
		<view class="" v-if="userType==1">
			<view v-if="status!=5"  class="footer" @click="clickBtn">
			  <view class="recall">撤回</view>
			</view>
			<view v-if="status==5"  class="footer">
			  <view class="recall1">编辑</view>
			</view>
		</view>
		
		<view class="" v-if="userType==2">
			<view v-if="status!=2"  class="footer">
			  <view class="recall2" @click="clickPass(1)">驳回</view>
				<view class="recall3" @click="clickPass(2)">通过</view>
			</view>
			<view v-if="status==2"  class="footer" @click="clickBtn">
			  <view class="recall">撤销</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import faultMessage from './components/faultMessage.vue';
import auditCheck from './components/auditCheck.vue';
import service from './components/service.vue';
import { ref,reactive } from 'vue';
let status = ref(1)
let userType = ref(2) // 1申请人  2审核人
	const statusColors = reactive({
	  1: '#0052d9',
	  2: '#55aa00',
	  3: '#ffaa00',
	  4: '#ff0000',
	  default: '#cbcbcb'
	});
const leftClick = () => {
	uni.navigateBack()
}
const tabs = ref([
  {
    //标签显示文本（String）
    name: '设备信息'
  },
  {
    name: '备件明细',
	},
  {
    name: '审核信息'
  }
]);

const checkIndex = ref(0);
const change = (e) => {
  console.log(e);
  checkIndex.value = e.index;
};

const clickPass = (e) => {
	uni.navigateTo({
		url: '/subpkg_sparePart/approval/approval'
	})
}
const clickBtn = () => {
  uni.showModal({
    content: '确定要撤回申请吗？',
    confirmColor: '#0052db',
    success(res) {
      console.log(res);
      if (res.confirm) {
        uni.showToast({
        	icon:'none',
					title:'撤回成功！'
        })
      }
    }
  });
};

</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.colorGray {
  color: #cbb8b8 !important;
}

.port {
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    display: flex;
    align-items: center;
  }
  .li {
    padding: 20rpx;
    display: flex;
    align-items: center;
    height: 100rpx;
    // padding-left: 40rpx;
    .right {
      margin-left: 30rpx;
      color: #cbb8b8;
    }
  }
  .item {
    // height: 100rpx;
    padding-left: 40rpx;
    padding-bottom: 30rpx;
    .left {
      height: 70rpx;
    }
    .described {
      padding-right: 50rpx;
    }
  }
}

.statusType{
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	width: 200rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	border: 1rpx solid #0052d9;
	color: #0052d9;
}
.warp {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .nav {
    background-color: #fff;
    .top {
      display: flex;

      .img {
        width: 180rpx;
        height: 190rpx;
      }
      .nav_title {
        // padding: 20rpx;
        padding-left: 20rpx;
        .h1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 60rpx;
          height: 60rpx;
        }
        .h2 {
          line-height: 44rpx;
        }
      }
    }
    .nav_bottom {
      margin-top: 10rpx;
      .nav_warp {
        padding: 10rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .scroll-view {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    padding-bottom: 170rpx;
  }
}
.footer {
  // position: fixed;
  // top: 50;
  // button: 20;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  border-top: 1px solid #ccc;
  height: 150rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .recall {
    // background-color: #0052d9;
    width: 90%;
    border: 1px solid #0052d9;
    border-radius: 5rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #0052d9;
  }
	.recall2{
		width: 40%;
		border: 1px solid #ccc;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
	}
	.recall3{
		width: 40%;
		background-color: #0052d9;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
		color: #ffffff;
	}
}
</style>
